Python 初心者でも簡単!OpenAI を利用したチャットアプリを Streamlit で公開してみた

Python 初心者でも簡単!OpenAI を利用したチャットアプリを Streamlit で公開してみた

Python 初心者でも簡単に AI チャットアプリを公開するまでの手順を、学習に使用した講座とともにご紹介します。
Clock Icon2023.07.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

[2023.09.19 追記]
本記事の執筆にあたり参考にさせていただいたUdemy講座の講師の方より、記事内容についてコメントをいただいたため一部修正しました。 

はじめに

こんにちは、アノテーション テクニカルサポートの Shimizu です。

突然ですが、私も含めた Python 初心者に、以下のような人は多いのではないでしょうか。

昨今の AI ブームに乗って API でデータをやり取りする基本的な Python プログラムを PC 上で動かせたものの、それを Web アプリとして公開するまでのハードルが高く感じる。

ブラウザ操作の UI を実装するには Django などの Web フレームワークを習得したり、アプリとして公開するには Python が動作するサーバーを用意したりと、なんだか難しそう・・

そんな私にピッタリのUdemy講座を見つけたため、今回受講してみました。

ChatGPT APIを使ってチャットボットを作ろう!【GPT-3.5/GPT-4】 -LLMを使うアプリの構築と公開- | Udemy

講座では基本的な Python チャットアプリの作成から実践的な AI の活用アイデアまで丁寧にされており、初心者の私でも楽しく学べる内容でした。

今回は講座の中の一部(Python で基本的な AI チャットアプリを公開するまで)を実践してみた手順をご紹介します!

完成イメージ

step1. 事前準備

まず事前に下記(1)~(3)を用意しましょう。
※ 本記事では Git / GitHub の基本的な使い方や Python の環境構築などの説明は省略しています。

(1) OpenAI の API キー
まだ API キーを取得していない方は、こちらの記事を参考に取得しておきましょう。

(2) GitHub のアカウント登録
GitHub アカウントを用意し、今回使用するリポジトリを作成しておきます。

今回は最短でアプリを公開するのが目的なので Public リポジトリを作成します。名前は「openai-streamlit-test-yyyymmdd」等にしておきます。

(3) ローカルの Python 実行環境
Python のコードをターミナル上で実行したり、GitHub に push できる環境を用意しましょう。
筆者の場合は Windows の WSL 上で下記の環境を構築しました。

  • Ubuntu 20.04 LTS(WSL)
  • Python 3.11.4
  • VSCode 1.80.0

(1)~(3)が用意できたら、次のステップへ進みましょう!

step2. ローカルの Python 開発環境でチャットアプリを作成し、動作確認する

まずはターミナルから下記コマンドを実行し、今回必要なパッケージ(streamlit, openai)をローカル環境にインストールします。

pip install streamlit
pip install openai

次に適当な作業フォルダを作成し、中に下記 3 つのファイルを配置します。
フォルダ名は任意ですが、ここでは分かりやすいように step1 で作成した GitHub のリポジトリと同名にしておきます。

/openai-streamlit-test-yyyymmdd #作業フォルダ
├─ app.py #コード本体
├─ secret_key.py #OpenAI API キーを格納するファイル
├─ title_image.jpg #画面に表示するタイトル画像

それぞれのファイルの内容は以下です。

(1) app.py の内容
コードの前半が OpenAI API との通信処理、後半が Streamlit を使用した Web UI の実装部分になります。
参考Udemy講座内のサンプルコードを引用させていただきました。
※ 元のコードは MIT License にて公開されています。

# Copyright (c) 2023 yuky_az
# MIT License https://opensource.org/license/mit/

import streamlit as st
import openai

# 外部ファイルからAPI keyを保存
import secret_keys
openai.api_key = secret_keys.openai_api_key

system_prompt = "あなたは優秀なアシスタントAIです。なんでも質問に答えてください。"

# メッセージのやりとりを保存する
if "messages" not in st.session_state:
    st.session_state["messages"] = [
        {"role": "system", "content": system_prompt}
        ]

# OpenAI API との通信部分
def communicate():
    messages = st.session_state["messages"]

    user_message = {"role": "user", "content": st.session_state["user_input"]}
    messages.append(user_message)

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=messages
    )

    bot_message = response["choices"][0]["message"]
    messages.append(bot_message)

    st.session_state["user_input"] = ""


# UI 部分の実装
st.title("アシスタントAIボット")
st.image("title_image.jpg")
st.write("? こんにちは!何でも質問してください")

user_input = st.text_input("メッセージを入力してください。", key="user_input", on_change=communicate)

if st.session_state["messages"]:
    messages = st.session_state["messages"]

    for message in reversed(messages[1:]):
        speaker = "?"
        if message["role"]=="assistant":
            speaker="?"

        st.write(speaker + ": " + message["content"])

(2) secret_key.py の内容
"Your API Key" の部分は、step1 で取得した実際の OpenAI APIキーに置き換えます。

openai_api_key = "Your API Key"

(3) title_image.jpg(任意)
これは各自用意した適当な画像でOKです(無くてもかまいません)
筆者の場合は生成AIでそれらしいタイトル画像を作成しました。よろしければサンプルとしてお使いください。

実はこれだけで、チャットアプリは完成です。
ターミナルから下記のコマンドを実行して、アプリをローカルで起動します。

streamlit run app.py

※ 初回実行時は Email の入力を促されますが、特に入力せずに Enter キーでスキップしてOKです。

ブラウザが立ち上がり、http:localhost:8501 でチャットアプリが起動します。
適当な質問を入力して Enter キーを押し、返答が返ってくるのを確認しましょう。

正常に返答が返ってくれば、ローカル環境での動作確認はOKです!
次のステップではアプリを Web に公開する前準備として、GitHub のリポジトリにソースコードの push を行っていきます。

step3. アプリ公開のためにソースコードを GitHub に push する

ここでひとつ、重要な注意点があります。
それは OpenAI の API キーが含まれるファイルを GitHub の公開リポジトリに push してはいけないということです。誤って push してしまうと、大事な API キーが誰からでも見られる状態になってしまいます。

ですので、step2 で作成したソースコードを GitHub へ push する前に、以下の 3 点を変更する必要があります。

  • secret_key.py ファイルを削除する
    (Git に慣れた方は、削除せずに .gitignore で除外しても OK です)
  • app.py の記述を変更し、API キーの読み込み設定を変更する
  • アプリのデプロイ時に必要な requirements.txt ファイルを追加する

app.py の設定変更(4行目 ~ 6行目を以下に変更する)

########## 変更前
# 外部ファイルからAPI keyを保存
import secret_keys
openai.api_key = secret_keys.openai_api_key

########## 変更後
# Streamlit Community Cloudの「Secrets」からOpenAI API keyを取得
openai.api_key = st.secrets.OpenAIAPI.openai_api_key

requirements.txt の内容

streamlit==1.20.0
openai

ここまでの変更で、現在は以下のようなファイル構成になっているはずです。

変更後のファイル構成

/openai-streamlit-test-yyyymmdd #作業フォルダ
├─ app.py #コード本体(設定変更済み)
├─ requirements.txt # 必要なライブラリを記述したファイル
├─ title_image.jpg

ソースコードの中に secret_keys.py ファイルが含まれていないことを確認したら、GitHub への push を行っていきます。

GitHub のリポジトリにソースコードを push する

#git の開始とリモートリポジトリの追加
git init
git branch -M main
git remote add origin https://github.com/[step1 で作成したリポジトリ名].git

#リモートリポジトリへコードを push する
git add .
git commit -m "first commit"
git push -u origin main

push が完了したら、GitHub の画面上でも API キーのファイルが含まれていないことを再度確認しましょう。

それでは次のステップで、GitHub に push したソースコードをアプリとしてデプロイし、公開してみます!

step4. 作成したAIチャットアプリを Streamlit Community Cloud で公開する

まずは Streamlit Community Cloud の登録ページにアクセスします。前のステップで GitHub のアカウントを登録しているので、[Continue with Github]に進めばそのままサインインできるはずです。

サインインするとアプリの作成画面に進めるので、右上の[New app]ボタンをクリックします。

デプロイするアプリの各情報を入力します。
"Repository" は今回作成した GitHub のリポジトリ名を入力し、"Main file path" はプログラム本体のファイル名(今回の場合 app.py)を入力します。"App URL" は任意ですが、グローバルに公開する URL なので他と重複しない一意の URL にしましょう。

以上を入力したら "Advanced settings" をクリックします。

ポップアップ画面が表示されるので、"Secrets" の入力欄に以下のように入力します。
("Your API Key" の部分は実際の API キーに置き換えましょう)

[OpenAIAPI]
openai_api_key = "Your API Key"

API キーを入力したら[Save]で保存してポップアップ画面を閉じ、[Deploy!] ボタンをクリックします。

アプリのデプロイが開始され、お菓子をオーブンで焼いているようなイメージでデプロイの進捗が表示されます。右下部分をクリックすると詳細を表示できます。

デプロイが完了したら、作成したチャットアプリがパブリックに公開可能な URL で表示されます。
ローカル環境と同様に質問を入力し、動作を確認してみましょう。

問題なく動作すれば、Python で自作した AI チャットアプリの公開は完了です。
お疲れ様でした!

さいごに

いかがでしたでしょうか。
Python 初心者の私でも難しいWebフレームワーク等を習得することなく、比較的簡単に AI チャットアプリを公開できました。

当記事では「初心者が基本的な Python アプリを最短で公開する」という点に焦点を当ててご紹介しましたが、参考にさせていただいたUdemyの講座ではさらに詳しい Python の開発手順や、実践的な AI の活用例なども豊富に取り上げられており、楽しく学べる内容になっています。
本記事をご覧になって、より本格的な AI アプリの開発を目指される方は、ぜひ受講してみることをお勧めします!

ChatGPT APIを使ってチャットボットを作ろう!【GPT-3.5/GPT-4】 -LLMを使うアプリの構築と公開- | Udemy

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.